<template>
  <ul>
    <li
        v-for="ranking in rankingList"
        :key="ranking.id"
        class="flex items-center mt-2 mb-2 cursor-pointer"
        :class="[ranking.id === playlistId ? 'yu-bgColor-active' : '', store.isFlag ? 'yu-one-hover-bgColor yu-textColor-hover' : '']"
        @click="selectTopList(ranking.id)"
    >
      <div class="w-15 h-15 mr-2">
        <img class="w-full h-full" :src="ranking.coverImgUrl" alt="">
      </div>
      <div class="h-full flex-1 flex flex-col justify-around text-sm">
        <span>{{ ranking.name }}</span>
        <span>{{ ranking.updateFrequency }}</span>
      </div>
    </li>
  </ul>
</template>

<script setup>
import {useStore} from "@/store/index"

const store = useStore()
// 接受父组件传递的榜单列表
defineProps({
  rankingList:Array,
  playlistId: Number // 只需要当前榜单信息的id
})
const $emit = defineEmits(['selectTopList'])
const selectTopList = (id) => {
  $emit('selectTopList', id)
}

</script>

<style scoped>

</style>
